<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水稻病虫害自动识别系统</title>
</head>
<body>
    <h1>
        点击下面的按钮上传图片
    </h1>
    <input id='upload' accept="image/*" type="file"/>
    <p></p>
    <div id='result'></div>
</body>
<script>
    const resultDiv = document.getElementById('result');
    // 发送文件的函数
    function sendFile(file) {
        // 如果服务在其他机器上运行请修改下面的ip地址
        const uri = "http://139.217.228.30:13579/classifier/classify";
        const xhr = new XMLHttpRequest();
        const fd = new FormData();

        xhr.open("POST", uri, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 输出获得的结果
                const result = JSON.parse(xhr.responseText);
                resultDiv.innerHTML = `
                    <div>病虫害类型是${result.type}</div>
                    <div>说明：${result.text}</div>
                `;
            }
        };
        fd.append('file', file);
        // Initiate a multipart/form-data upload
        xhr.send(fd);
    }
    
    const upload = document.getElementById('upload');
    // 只要上传就开始识别
    upload.addEventListener('change', function() {
        const file = upload.files[0];
        sendFile(file);
    }, false);
</script>
</html>